package com.zj.play.compose.home

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Search
import androidx.compose.runtime.*
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.paging.ExperimentalPagingApi
import androidx.paging.compose.collectAsLazyPagingItems
import com.zj.banner.BannerPager
import com.zj.banner.ui.indicator.NumberIndicator
import com.zj.model.room.entity.Article
import com.zj.model.room.entity.BannerBean
import com.zj.play.R
import com.zj.play.compose.MainActions
import com.zj.play.compose.common.PlayAppBar
import com.zj.play.compose.common.article.ArticleListPaging
import com.zj.play.compose.common.article.ToTopButton
import com.zj.play.compose.common.lce.SetLcePage
import com.zj.play.compose.model.PlayLoading
import com.zj.play.compose.model.PlaySuccess
import com.zj.play.compose.model.Query
import com.zj.play.compose.viewmodel.HomePageViewModel


@ExperimentalPagingApi
@Composable
fun HomePage(
    actions: MainActions,
    modifier: Modifier = Modifier,
    viewModel: HomePageViewModel = viewModel()
) {
    val listState = rememberLazyListState()
    val bannerData by viewModel.bannerState.observeAsState(PlayLoading)
    var loadArticleState by remember { mutableStateOf(false) }
    val lazyPagingItems = viewModel.articleResult.collectAsLazyPagingItems()
    if (!loadArticleState) {
        loadArticleState = true
        viewModel.getBanner()
        viewModel.searchArticle(Query())
    }

    Column(modifier = Modifier.fillMaxSize()) {
        PlayAppBar(
            stringResource(id = R.string.home_page),
            false,
            showRight = true,
            rightImg = Icons.Rounded.Search,
            rightClick = actions.toSearch
        )
        SetLcePage(
            playState = bannerData,
            onErrorClick = {
                viewModel.getBanner()
            }
        ) {
            val data = bannerData as PlaySuccess<List<BannerBean>>
            Column {
                BannerPager(items = data.data, indicator = NumberIndicator()) {
                    actions.enterArticle(
                        Article(
                            title = it.title,
                            link = it.url
                        )
                    )
                }
                ArticleListPaging(
                    modifier,
                    listState,
                    lazyPagingItems,
                    actions.enterArticle
                )
            }
        }
    }

    if (loadArticleState && bannerData is PlaySuccess<*>) {
        ToTopButton(listState)
    }
}